<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="4" :xs="24">
        <el-card>
          <div class="head-container">
            <el-input
              placeholder="输入关键字进行过滤"
              clearable
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px"
            />
          </div>
          <div style="height: 73vh; overflow: auto">
            <el-tree
              v-if="refreshTree"
              :data="categories"
              :props="{value: 'id', label: 'title'}"
              :expand-on-click-node="false"
              ref="tree"
              node-key="id"
              default-expand-all
              highlight-current
              :current-node-key="queryParams.knowledgeCategoryId"
              @node-click="handleNodeClick"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-card class="box-card">
          <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="80px">
            <el-form-item label="计划名称" prop="planName">
              <el-input
                v-model="queryParams.planName"
                placeholder="请输入计划名称"
                clearable
              />
            </el-form-item>
            <el-form-item label="计划分类" prop="trainCategoryId">
              <el-select v-model="queryParams.trainCategoryId" placeholder="请选择计划分类">
                <el-option
                  v-for="item in dict.type.train_plan_train_category"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="培训类型" prop="trainType">
              <el-select v-model="queryParams.trainType" placeholder="请选择培训类型">
                <el-option
                  v-for="item in dict.type.train_plan_train_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="考试类型" prop="examType">
              <el-select v-model="queryParams.examType" placeholder="请选择考试类型">
                <el-option
                  v-for="item in dict.type.train_plan_exam_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="queryParams.status" placeholder="请选择状态">
                <el-option
                  v-for="item in dict.type.train_plan_status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="起止时间" prop="status">
              <el-date-picker
                v-model="timeRange"
                type="daterange"
                align="right"
                value-format="yyyy-MM-dd"
                unlink-panels
                range-separator="至"
                start-placeholder="起始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-form>

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="small"
                @click="handleAdd"
              >
                创建培训计划
              </el-button>
              <el-button
                type="warning"
                icon="el-icon-download"
                size="small"
                @click="handleExport"
              >
                导出
              </el-button>
            </el-col>
            <div style="text-align: right">
              <el-button size="small" type="primary" icon="el-icon-search" @click="handleQuery"> 搜索</el-button>
              <el-button size="small" icon="el-icon-refresh" @click="handleReset"> 重置</el-button>
            </div>
          </el-row>

          <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange" border>
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="序号" type="index" width="60px"/>
            <el-table-column label="计划名称" prop="planName" width="220px"/>
            <el-table-column label="计划分类" width="80px">
              <template slot-scope="scope">
                <dict-tag size="mini" style="margin-right: 5px" :options="dict.type.train_plan_train_category"
                          :value="scope.row.trainCategoryId"/>
              </template>
            </el-table-column>
            <el-table-column label="知识分类" prop="knowledgeCategories" width="220px"/>
            <el-table-column label="起止时间" width="180px">
              <template slot-scope="scope">
                <div>
                  起始：{{ scope.row.startTime }}
                </div>
                <div>
                  结束：{{ scope.row.endTime }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="培训工时" prop="trainWorkHours"/>
            <el-table-column label="培训讲师" prop="trainLecturer"/>
            <el-table-column label="参与部门" prop="userDepts" width="250px"/>
            <el-table-column label="培训类型" width="80px">
              <template slot-scope="scope">
                <dict-tag size="mini" style="margin-right: 5px" :options="dict.type.train_plan_train_type"
                          :value="scope.row.trainType"/>
              </template>
            </el-table-column>
            <el-table-column label="考试类型" width="80px">
              <template slot-scope="scope">
                <dict-tag size="mini" style="margin-right: 5px" :options="dict.type.train_plan_exam_type"
                          :value="scope.row.examType"/>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="80px">
              <template slot-scope="scope">
                <dict-tag size="mini" style="margin-right: 5px" :options="dict.type.train_plan_status"
                          :value="scope.row.status"/>
              </template>
            </el-table-column>
            <el-table-column label="创建人" prop="createBy"/>
            <el-table-column label="创建时间" prop="createTime" width="160px"/>
            <el-table-column label="操作" width="220px" fixed="right">
              <template slot-scope="scope">
<!--                <el-button-->
<!--                  @click="handlePrint(scope.row.id)"-->
<!--                  icon="el-icon-printer"-->
<!--                  size="mini"-->
<!--                  type="text">打印-->
<!--                </el-button>-->
                <el-button
                  icon="el-icon-info"
                  @click="goProgress(scope.row.id)"
                  size="mini"
                  type="text">详情进度
                </el-button>
                <el-button
                  :disabled="scope.row.status !== '0'"
                  @click="handleUpdate(scope.row.id)"
                  icon="el-icon-edit"
                  size="mini"
                  type="text">编辑
                </el-button>
                <el-button
                  :disabled="scope.row.status !== '0'"
                  @click="handleDelete(scope.row)"
                  icon="el-icon-delete"
                  size="mini"
                  type="text">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :limit.sync="queryParams.pageSize"
            :page.sync="queryParams.pageNum"
            :total="total"
            @pagination="getList"
          />

        </el-card>
      </el-col>
    </el-row>

    <trainPlanOptModal
      ref="createTrainPlan"
      v-if=drawerShow
      :id="id"
      :open="drawerShow"
      :close="handleClose"
      @submit="handleSubmit"
    />

    <trainPlanInfoModal
      ref="trainPlanInfoModal"
      v-if="infoShow"
      :id="id"
      :open="infoShow"
      :close="() => {infoShow = false}"
    >

    </trainPlanInfoModal>
  </div>
</template>

<script>
import trainPlanOptModal from './create.vue'
import trainPlanInfoModal from './info.vue'
import {addTrainPlan, categoryTreeList, trainPlanDelete, trainPlanList, updateTrainPlan} from '@/api/edu/trainPlan'

export default {
  name: 'index',
  components: {trainPlanOptModal, trainPlanInfoModal},
  dicts: ['train_plan_status', 'train_plan_train_type', 'train_plan_exam_type', 'train_plan_train_category'],
  data() {
    return {
      ids: [],
      timeRange: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      reportUrl: process.env.VUE_APP_BASE_API + "/ureport/pdf/show?_u=file:%E5%9F%B9%E8%AE%AD%E8%AE%A1%E5%88%92%E6%8A%A5%E8%A1%A8.ureport.xml&_p=1&id=",
      loading: false,
      showSearch: true,
      queryParams: {
        knowledgeCategoryId: '',
        planName: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      dataList: [],
      drawerShow: false,
      infoShow: false,
      id: null,
      categories: [],
      refreshTree: true
    }
  },
  created() {
    this.getList()
    this.getCategories()
  },
  methods: {
    handleSelectionChange(selection) {
      console.log("selection", selection)
      this.ids = selection.map((item) => item.id);
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.queryParams.startTime = this.timeRange[0]
      this.queryParams.endTime = this.timeRange[1]
      this.getList()
    },
    handleReset() {
      this.refreshTree = false
      this.timeRange = ''
      this.queryParams = {
        knowledgeCategoryId: null,
        planName: '',
        pageNum: 1,
        pageSize: 10
      }
      this.getList()
    },
    getCategories() {
      categoryTreeList().then(res => {
        this.categories = res.data.rows
      })
    },
    handleNodeClick(e) {
      this.queryParams.knowledgeCategoryId = e.id
      this.getList()
    },
    getList() {
      this.loading = true
      trainPlanList(this.queryParams).then(res => {
        this.dataList = res.data.list
        this.total = res.data.total
        this.loading = false
        this.refreshTree = true
      })
    },
    goProgress(id) {
      this.$router.push({
        path: '/trainPlan/progress',
        query: {
          id: id
        }
      })
    },
    handleAdd() {
      this.drawerShow = true
    },
    handlePrint(id) {
      window.open(`${this.reportUrl}${id}`, "_blank")
    },
    handleUpdate(id) {
      this.id = id
      this.drawerShow = true
    },
    handleDelete(row) {
      this.$confirm(`是否删除培训计划【${row.planName}】?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        trainPlanDelete(row.id).then(res => {
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      })
    },
    handleInfo(id) {
      this.id = id
      this.infoShow = true
    },
    handleClose() {
      this.$refs.createTrainPlan.reset()
      this.drawerShow = false
    },
    handleSubmit(data) {
      if (data.id) {
        updateTrainPlan(data).then(res => {
          this.$refs.createTrainPlan.endLoading()
          this.$refs.createTrainPlan.reset()
          this.drawerShow = false
          this.id = null
          this.getList()
        })
      } else {
        addTrainPlan(data).then(res => {
          this.$refs.createTrainPlan.endLoading()
          this.$refs.createTrainPlan.reset()
          this.drawerShow = false
          this.getList()
        })
      }
    },
    handleExport() {
      if(this.ids.length > 0){
        this.queryParams.ids = this.ids.toString()
      } else {
        this.queryParams.ids = ''
      }
      this.download('eduTrainPlan/transPlanList/export', {
        ...this.queryParams
      }, `train_plan_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>

<style scoped>
::v-deep .el-card__body {
  min-height: 85vh;
}

.app-container {
  padding: 10px;
}

::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

::v-deep .el-tree-node {
  .el-tooltip {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    width: 80%;
    display: inline-block;
  }
}
</style>
